<template>
  <div class="box">
    <div class="followDetails_top">
      <h2>
        <van-icon name="column" />来自<span>{{list.info.name}}</span>的赞赏</h2>
      <div><span>{{list.info.label}}</span><span class="right">+{{list.info.code_a}}</span></div>
      <div style="font-size:13px;">{{list.info.create_date}}</div>
      <div style="font-size:14px;color:silver"><span>跟赞<span>{{list.count}}</span>赞币</span><span class="right"><van-icon name="good-job" /><span v-if='list.alreadyPraised==0' @click="showFollow(list.info.id)">点赞</span><span v-else>已赞</span></span></div>
    </div>
          <div style="height:15px;background: #f8f8fa"></div>
    <div class="followDetails_list" v-for="(item,i) in list.list" :key="i">
      <van-row>
        <van-col span="8">{{item.name}}</van-col>
        <van-col span="8">{{item.event_desc}}</van-col>
        <van-col span="8">{{item.create_date}}</van-col>
      </van-row>
    </div>
  </div>
</template>

<script type="text/javascript">
import { Icon, Col, Row } from "vant";
export default {
  data() {
    return {
      list:{},
    };
  },
  components: {
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row
  },
  created() {
    this.getFollow();
    dd.biz.navigation.setTitle({
        title: '跟赞详情页' //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    showFollow(id){
       this.$router.push({
        //核心语句
        path: "/follow", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: id
        }
      });
    },
    async getFollow() {
      const id = this.$route.query.id;
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/fabulousInfo?corpId=${corpId}&userId=${userId}&id=${id}`
      );
      this.list = res.data.data;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  text-align: left;
  font-size: 16px;
  /deep/ .van-icon {
    font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
}
  .followDetails_top {
    background: #fff;
    padding: 10px 25px;
    h2 {
      margin: 0px;
    }
    div {
      margin-bottom: 5px;
    }
  }
  .followDetails_list {
    text-align: center;
    margin-top: 5px;
    padding: 10px;
    border-bottom:1px solid #c0c0c033
  }

  .right {
    float: right;
  }
}
</style>
